<template>
  <div id="changedialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :dialogTitle="dialogTitle"
      @closetextDialog="closetextDialog"
      @confirmbtn="confirmbtn"
    >
      <div class="changetab">
        <div class="innerLoding">
          <el-row>
            <el-form
              :model="formData"
              ref="ruleForm"
              :rules="rules"
              placeholder="请选择地址"
              label-width="100px"
              size="small"
              label-position="left"
            >
              <el-row>
                <el-col :span="14">
                  <el-form-item label="跟进时间:" prop="follow_time">
                    <el-date-picker
                      v-model="formData.follow_time"
                      type="datetime"
                      placeholder="选择日期时间"
                      align="right"
                      :picker-options="pickerOptions"
                      style="width: 100%"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-col :span="14">
                <el-form-item label="联系人:" prop="contact_id">
                  <el-select
                    v-model="formData.contact_id"
                    placeholder="请选择联系人"
                    style="width: 100%"
                    clearable
                  >
                    <el-option
                      :label="item.name+' '+item.tel+' '+item.wechat+' '+item.email"
                      :value="item.id"
                      v-for="(item, index) in linkmanList"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="" label-width="0">
                  <el-button
                    type="text"
                    style="margin-left: 20px"
                    @click="editlinkman"
                    >编辑</el-button
                  >
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="跟进内容:" prop="followContent">
                  <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="请输入跟进内容"
                    v-model="formData.followContent"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="">
                  <el-button type="primary" @click="followadd">提交</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>

          <!-- <div class="d-el-top">
          <div class="d-el-title">跟进内容</div>
          <div class="d-el-textarea">
            <textarea v-model="followContent" placeholder="请输入跟进内容..." />
          </div>
          
        </div> -->
          <div class="d-el-bottom">
            <span class="listTitle">跟进记录:</span>
            <div class="d-el-list">
              <ul v-if="gjdwList.length>0">
                <li v-for="(item, index) in gjdwList" :key="index">
                  <div class="d-el-list-title">
                    <p>{{ item.content }}</p>
                  </div>
                  <div class="d-el-list-desc">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      placement="top"
                      v-if="item.contact_id.length > 0"
                      v-for="i in item.contact_id"
                      :key="i.id"
                    >
                      <div slot="content">
                        　<span
                          ><span>{{ "email ：" + i.name}}
                              <span style="margin-left: 10px">{{"电话 ：" + i.tel}}</span>
                              <span style="margin-left: 10px">{{"微信 ：" + i.wechat}}</span>
                          </span>
                          <br
                        /></span>
                      </div>
                      <span>{{ i.name }}</span>
                    </el-tooltip>
                  </div>
                  <div class="d-el-list-desc">
                    <span>跟进人:{{ item.user_id }}</span>
                    <span>跟进日期：{{ item.create_time }}</span>
                  </div>
                </li>
              </ul>
                <p v-else style="textAlign:center;">暂无记录</p>
            </div>

            <el-row>
              <el-col :span="24" class="pagination">
                <el-pagination
                v-if="gjdwList.length>0"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[5, 10]"
                  :page-size="5"
                  background
                  :current-page.sync="page"
                  layout="total, sizes, prev, pager, next"
                  :total="pagination.total"
                >
                </el-pagination>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </commonformdialog>
    <!-- 弹框 -->
    <subdialog
      :isshowDialog="bjisshowDialog"
      :dialogTitle="bjdialogTitle"
      :formType="bjformtype"
      @confirm="bjconfirm"
      @closedialog="bjclosedialog"
      :dialogdata="bjdialogdata"
    ></subdialog>
  </div>
</template>

<script type="text/javascript">
import subdialog from "../../contacts/components/dialog";
//引入弹窗
import commonformdialog from "@/components/commondialog/commondialog";
import { contactsRead } from "@/api/contacts";
// 请求接口

import {
  followrecord,
  followrecordCreate,
  contactsOption,
} from "@/api/schoolResources";
export default {
  data() {
    return {
      bjisshowDialog: false,
      bjdialogTitle: "编辑联系人",
      bjformtype: 1,
      followContent: "",
      pagination: {},
      bjdialogdata: {},
      gjdwList: [],
      linkmanList: [],
      formData: {
        follow_time: new Date(),
        contact_id: "",
        followContent: "",
      },
       rules: {
        contact_id: [{ required: true, message: "请选择联系人", trigger: "blur" }],
        followContent: [{ required: true, message: "请输入跟进内容", trigger: "blur" }],
      },
      page: 1,
      rows: 5,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: "",
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },

    dialogdata: {
      type: Object,
    },
  },
  components: {
    commonformdialog,
    subdialog,
  },
  methods: {
    closetextDialog() {
      this.$emit("closedialog");
    },
    bjconfirm() {
      this.bjisshowDialog = false;
      this.getgjList();
      this.getuniversityOption();
    },
    bjclosedialog() {
      this.bjisshowDialog = false;
    },
    //编辑
    editlinkman(val) {
      if (!this.formData.contact_id) {
        this.$message({
          type: "error",
          message: "请选择联系人!",
        });
        return;
      }
      this.bjisshowDialog = true;
      this.getquestionRead(this.formData.contact_id);
      // this.bjdialogdata.contact_id=this.formData.contact_id
    },
    //详情
    async getquestionRead(id) {
      let data = await contactsRead({ id: id }, false);
      this.bjdialogdata = data.data;
    },
    handleSizeChange(val) {
      this.rows = val;
      this.getgjList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getgjList();
    },
    // 获取跟进记录列
    async getgjList() {
      const params = {
        objectId: this.dialogdata.objectId,
        objectType: this.dialogdata.objectType,
        page: this.page,
        rows: this.rows,
      };
      const data = await followrecord(params);
      if (data.code == "0000") {
        this.gjdwList = data.data.list;
        // 跟进列表的总页数
        this.pagination = data.data.page;
      }
    },
    //获取选项
    async getuniversityOption() {
      const params = {
        objectId: this.dialogdata.objectId,
        objectType: this.dialogdata.objectType,
      };
      let data = await contactsOption(params);
      this.linkmanList = data.data;
    },
    // 写入跟进记录
    async followadd() {
      // 判断用户是否输入了信息
      if (this.formData.followContent.trim() == "") {
        this.$message({
          type: "error",
          message: "请输入跟进内容!",
        });

        return;
      }
      const params = {
        object_id: this.dialogdata.objectId,
        object_type: this.dialogdata.objectType,
        // 内容
        content: this.formData.followContent,
        follow_time: this.formData.follow_time,
        contact_id: this.formData.contact_id,
      };
      const data = await followrecordCreate(params);
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        // 清空输入框
        this.followContent = "";
        // 刷新列表
        this.getgjList();
      }
    },
    confirmbtn() {
      this.$emit("closedialog");
    },
  },
  watch: {
    isshowDialog: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
      } else {
         this.formData.follow_time=new Date(),
        this.getgjList();
        this.getuniversityOption();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-tabs--border-card > .el-tabs__header {
    background-color: #f8f8f8;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #303133;
  }
  .el-tabs--border-card {
    box-shadow: none;
  }
}
.changetab {
  min-height: 500px;
}
.followpagearea {
  margin-top: 20px;
}
.d-el-title {
  background-color: #f8f8f8;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
  color: #303133;
  font-size: 15px;
  border: 1px solid #e1e1e1;
}
.d-el-textarea {
  margin-top: -1px;

  textarea {
    width: 100%;
    height: 120px;
    border: none;
    outline: none;
    border: 1px solid #e1e1e1;
    resize: none;
    padding: 20px;
    box-sizing: border-box;
    color: #666;
  }
}
.d-el-button {
  margin-top: 20px;
}
.d-el-list-title {
  color: #303133;
  font-size: 15px;
  margin: 8px 0;
}
.d-el-bottom {
  margin-top: 20px;
  background-color: #fff;
  box-sizing: border-box;
}

.d-el-list-desc {
  display: flex;
  align-items: center;
  margin-top: 10px;
  span {
    color: #999;
    font-size: 13px;
    margin-right: 10px;
  }
}
.listTitle {
  font-weight: 700;
  font-size: 14px;
  color: #606266;
}
.d-el-list {
  padding-left: 100px;
  li {
    margin-top: 10px;
    border-bottom: 1px solid #e1e1e1;
    padding: 10px 0;
    list-style: none;
  }
}
</style>
